<template>
  <view class=" ">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <template #top>
        <tn-navbar>车类管理</tn-navbar>
        <tn-input v-model="inputValue" placeholder="请输入车型名称">
          <template #suffix>
            <view class="tn-ml tn-mr" @click="filterData">
              <tn-icon name="search" color=" tn-gray_bg"></tn-icon>
            </view>
          </template>
        </tn-input>
      </template>
      <view class="tn-p">
        <view
          v-for="(item, index) in dataList"
          :key="index"
          class="tn-shadow-md tn-p tn-mb tn-radius tn-black_text  ">
          <view class="tn-flex justify-between justify-start tn-mb-sm">
            <view>
              <tn-button type="primary" shape="circle">{{item.name[0]}}</tn-button>
              <text class="tn-text-xl tn-text-bold tn-ml-sm">
                {{ item.name }}
              </text>
            </view>
            <text
              class="tn-round tn-white_text tn-orangeyellow_bg tn-text-bold tn-pt-xs tn-pb-xs tn-pr-sm tn-pl-sm">
              {{ item.type }}
            </text>
          </view>
          <view
            class="coupon-details tn-mt tn-pt tn-pl-0 tn-pr-0 tn-ml-0 tn-mr-0">
            <view class="tn-flex justify-between tn-mb-sm">
              <text>
                <tn-icon name="tag" size="40" color="#ffffff"></tn-icon>
                日费用
              </text>
              <text>{{ item.price }} 元/小时</text>
            </view>
            <view class="tn-flex justify-between tn-mb-sm">
              <text>
                <tn-icon name="tag" size="40" color="#ffffff"></tn-icon>
                月费用：
              </text>
              <text>{{ item.price }} 元/小时</text>
            </view>
            <view class="tn-flex justify-between tn-mb-sm">
              <text>
                <tn-icon name="tag" size="40" color="#ffffff"></tn-icon>
                季费用：
              </text>
              <text>{{ item.price }} 元/小时</text>
            </view>
            <view class="tn-flex justify-between tn-mb-sm">
              <text>
                <tn-icon name="tag" size="40" color="#ffffff"></tn-icon>
                年费用：
              </text>
              <text>{{ item.price }} 元/小时</text>
            </view>
          </view>
          <view class="tn-flex justify-end tn-mt-sm">
            <view class="tn-m-xs">
              <tn-button
                :shadow="true"
                shadow-color="tn-grey"
                bg-color="tn-white"
                @click="openEditPopupVehicleType(item.id)">
                <tn-icon name="edit-write-fill" size="30"></tn-icon>
                编辑
              </tn-button>
            </view>
            <view class="tn-m-xs">
              <tn-button
                :shadow="true"
                shadow-color="tn-grey"
                bg-color="tn-white"
                @click="deleteVehicleTypeModal(item.id)">
                <tn-icon name="delete" size="30" color="tn-red"></tn-icon>
                删除
              </tn-button>
            </view>
          </view>
        </view>
      </view>

      <template #loadingMoreNoMore></template>
    </z-paging>
  </view>
  <view>
    <!-- 悬浮按钮 -->
    <tn-suspend-button
      icon="add"
      size="sm"
      text-color="tn-white"
      bg-color="tn-gradient-bg__cool-5"
      @click="openAddPopupVehicleType" />
    <!-- 车型弹框 -->
    <tn-popup
      v-model="isPopupVehicleType" 
      open-direction="bottom"
      @close="closePopupVehicleType"
      close-btn
       >
      <view class="tn-m-sm tn-p-sm">
        <view class="tn-mb-xl">
          <tn-title
            size="lg"
            title="车型管理"
            mode="hLine"
            sub-title="VehicleType"
            assist-color="tn-blue" />
        </view>
        <tn-form ref="formRef" :model="formDataVehicleType" label-position="top" class="tn-mb-xl">
			<scroll-view
			     style="height: 70vh;" scroll-y="true" class="tn-mb-xl">
          <tn-form-item label="所属车场">
            <tn-input
              v-model="formDataVehicleType.parkingLotName"
              disabled></tn-input>
          </tn-form-item>
        <tn-form-item label="计费类型" prop="couponType">
        	<tn-bubble-box :options="COUPON_TYPE" position="bottom" @click="confirmBubble(COUPON_TYPE, 'couponType', $event)">
        		<tn-input style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]" placeholder="请选择计费类型" />
        	</tn-bubble-box>
        </tn-form-item>
          <tn-form-item label="计费名称">
            <tn-input v-model="formDataVehicleType.remark"  ></tn-input>
          </tn-form-item>
          <tn-form-item label="可停放车库">
           <tn-bubble-box :options="COUPON_TYPE" position="bottom" @click="confirmBubble(COUPON_TYPE, 'couponType', $event)">
           	<tn-input style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]" placeholder="请选择可停放车库" />
           </tn-bubble-box>
          </tn-form-item>
		  <tn-form-item label="描述">
		    <tn-input v-model="formDataVehicleType.remark"></tn-input>
		  </tn-form-item>
      
       <tn-form-item label="日费用">
         <tn-input v-model="formDataVehicleType.remark"></tn-input>
       </tn-form-item>
	   <tn-form-item label="月费用">
	     <tn-input v-model="formDataVehicleType.remark"></tn-input>
	   </tn-form-item>
	   <tn-form-item label="季费用">
	     <tn-input v-model="formDataVehicleType.remark"></tn-input>
	   </tn-form-item>
	   <tn-form-item label="年费用">
	     <tn-input v-model="formDataVehicleType.remark"></tn-input>
	   </tn-form-item> 
	   
	   </scroll-view>
          <view class="tn-flex justify-between tn-mt">
			  <tn-button
			    :shadow="true"
			    shadow-color="tn-grey"
			    @click="confirmEditVehicleType"
			    size="lg"
			    width="80%"
			    bg-color="tn-gray">
			    取消
			  </tn-button>
            <tn-button
              :shadow="true"
              shadow-color="tn-grey"
              @click="confirmEditVehicleType"
              size="lg"
              width="80%"
              bg-color="tn-blue">
              确认
            </tn-button>
          </view>
		  	 
        </tn-form>
      </view>
    </tn-popup>
     <!-- 选择器 -->
     <tn-picker v-model:open="openPickerVisible" :data="pickerData" @confirm="confirmPicker" @close="closePicker" />
    <!-- 删除弹框 -->
    <tn-modal ref="modalRef" />
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import TnSuspendButton from "tnuiv3p-tn-suspend-button/index.vue";
import { COUPON_TYPE } from "@/utils/dict"; // 引入计费方式和车型字典
import { onLoad } from "@dcloudio/uni-app";
import cfsheep from "@/cfsheep";
import type { TnModalInstance } from "@/uni_modules/tuniaoui-vue3";
// ===============模拟数据 =========================

// 模拟数据
const tempList = ref([]);

// z-paging 示例
const paging = ref(null);
// 数据列表
const dataList = ref();

const queryList = (pageNo, pageSize) => {
  // 模拟数据

  for (let i = 0; i < 10; i++) {
    tempList.value.push({
      id: i,
      name: "储值车" + i,
      type: "按临时车计费",
      duration: { value: 3, unit: "小时" },
      amount: "3小时",
      price: 2,
    });
  }
  paging.value.complete(tempList.value);
};

// ===========================================



// 车型操作-车型弹框
const isPopupVehicleType = ref(false);
// 车型操作-车型表单
const formDataVehicleType = ref({
  parkingLotName: null,
  couponType: "",
  couponUnits: "",
  ownerPhone: "",
  address: "",
  billingMethod: "",
  unitPrice: "",
  quantity: "",
  balance: "",
  amountReceivable: "",
  amountReceived: "",
  validityStart: "",
  validityEnd: "",
  carType: "",
  remarks: "",
  noRenewal: null,
});
// 车型操作-显示新增弹框
const openAddPopupVehicleType = () => {
  isPopupVehicleType.value = true;
};
// 车型操作-显示编辑弹框
const openEditPopupVehicleType = () => {
  isPopupVehicleType.value = true;
};
// 车型操作-关闭弹框
const closePopupVehicleType = () => {
  isPopupVehicleType.value = false;
};

// 车型操作-提交车型
const confirmEditVehicleType = () => {
  console.log(formData.value);
  // 确认修改逻辑
  closePopupVehicleType();
};
 
// 车型操作-车型删除ref
const modalRef = ref<TnModalInstance>();

// 车型操作-车型删除弹框确认
const deleteVehicleTypeModal = (id: String) => {
  modalRef.value?.showModal({
    title: "提示",
    content: "是否删除车型",
    confirmText: "确定",
    cancelText: "取消",
    showCancel: true,
    cancel: () => {
      return true;
    },
    confirm: () => {
      deleteVehicleType(id);
    },
  });
};
// 车型操作-车型删除
const deleteVehicleType = (id: String) => {
  // 删除记录逻辑

  paging.value.reload(true);
}; 

 // 确认选择器的选择
 const confirmBubble = (dict, labelKey, value) => {
 	console.log('confirmBubble=>', labelKey);
 	console.log('confirmBubble1=>', dict[value].value);
 	formData.value[labelKey] = dict[value].value;
 	// closePicker(); // 关闭选择器
 };

// 表单数据模型
const formData = ref({
  parkingLotName: null,
  couponType: "",
  couponUnits: "",
  ownerPhone: "",
  address: "",
  billingMethod: "",
  unitPrice: "",
  quantity: "",
  balance: "",
  amountReceivable: "",
  amountReceived: "",
  validityStart: "",
  validityEnd: "",
  carType: "",
  remarks: "",
  noRenewal: null,
});

// 字典枚举映射
const pickerDict = ref({
	dict: {
		couponType: COUPON_TYPE 
	},
	label: {}
});

// 选择器key
const pickerKey = ref('');
// 选择器数据
const pickerData = ref([]);

// 控制选择器的可见性
const openPickerVisible = ref(false);

// 打开选择器
const openPicker = (type) => {
	pickerKey.value = type;
	pickerData.value = pickerDict.value.dict[type];
	openPickerVisible.value = true; // 显示选择器
};

// 关闭选择器
const closePicker = () => {
	openPickerVisible.value = false; // 隐藏选择器
};

// 确认选择器的选择
const confirmPicker = (value) => {
	formData.value[pickerKey.value] = value;
	closePicker(); // 关闭选择器
};

// 处理字典数据格式
const getDictLabel = () => {
	pickerDict.value.label = {};
	for (let key in pickerDict.value.dict) {
		let dict = pickerDict.value.dict[key];
		pickerDict.value.label[key] = dict.reduce((acc, cur) => {
			acc[cur.value] = cur.label;
			return acc;
		}, {});
	}
};

onLoad(() => {
  getDictLabel();
});
</script>
<style lang="scss" scoped>
.coupon-details {
  border-top: 1px dashed rgba(12, 12, 12, 0.5);
  border-bottom: 1px dashed rgba(10, 10, 10, 0.5);
}

.coupon-footer {
  font-size: 14px;
  text-align: center;
  opacity: 0.8;
}
</style>
